<template>
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日车辆告警</text></view>
					</template>
					<my-grid :list="list" :col="2" @click="(data) => detailFn(data)" imgmode="heightFix" imgHight="60rpx" type="lr" />
				</u-collapse-item>
				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">剥离进度</text></view>
					</template>
					<!-- 剥离月计划 -->
					<view style="background-color: #f5f7fe" class="p-10">
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">月计划</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" :endVal="boliObj.blmplan" class="m-l-4" />
								<text class="unit">万m³</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">已完成</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" :endVal="boliObj.mblcount" class="m-l-4" />
								<text class="unit">万m³</text>
							</view>
						</view>
						<u-line-progress class="m-y-10" :percentage="boliObj.boliMonthPros" height="15" activeColor="#4C82FF" />
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">待完成</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" class="m-l-4" :endVal="boliObj.boliMonthIncomplete" />
								<text class="unit">万m³</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">完成率</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" class="m-l-4" :endVal="boliObj.boliMonthCompleteRate" />
								<text class="unit">%</text>
							</view>
						</view>
					</view>
					<!-- 剥离年计划 -->
					<view style="background-color: #f5f7fe" class="m-t-10 p-10">
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">年计划</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" :endVal="boliObj.blyplan" class="m-l-4" />
								<text class="unit">万m³</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">已完成</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" :endVal="boliObj.yblcount" class="m-l-4" />
								<text class="unit">万m³</text>
							</view>
						</view>
						<u-line-progress class="m-y-10" :percentage="boliObj.boliYearPros" height="15" activeColor="#19be6b" />
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">待完成</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" class="m-l-4" :endVal="boliObj.boliYearIncomplete" />
								<text class="unit">万m³</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">完成率</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" class="m-l-4" :endVal="boliObj.boliYearCompleteRate" />
								<text class="unit">%</text>
							</view>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item name="6">
					<template #title>
						<view class="content-item-title"><text class="title-txt">采煤进度</text></view>
					</template>
					<!-- 采煤月计划 -->
					<view style="background-color: #f5f7fe" class="p-10">
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">月计划</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" class="m-l-4" :endVal="boliObj.coalmplan" />
								<text class="unit">万t</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">已完成</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" :endVal="boliObj.mcoalcount" class="m-l-4" />
								<text class="unit">万t</text>
							</view>
						</view>
						<u-line-progress class="m-y-10" :percentage="boliObj.caiMeiMonthPros" height="15" activeColor="#4C82FF" />
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">待完成</view>
								<u-count-to bold fontSize="13" color="#0052D9" decimals="2" class="m-l-4" :endVal="boliObj.caiMeiMonthIncomplete" />
								<text class="unit">万t</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">完成率</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" class="m-l-4" :endVal="boliObj.caiMeiMonthCompleteRate" />
								<text class="unit">%</text>
							</view>
						</view>
					</view>
					<!-- 采煤年计划 -->
					<view style="background-color: #f5f7fe" class="m-t-10 p-10">
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">年计划</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" :endVal="boliObj.coalyplan" class="m-l-4" />
								<text class="unit">万t</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">已完成</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" :endVal="boliObj.ycoalcount" class="m-l-4" />
								<text class="unit">万t</text>
							</view>
						</view>
						<u-line-progress class="m-y-10" :percentage="boliObj.caiMeiYearPros" height="15" activeColor="#19be6b" />
						<view class="flex m-between">
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">待完成</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" class="m-l-4" :endVal="boliObj.caiMeiYearIncomplete" />
								<text class="unit">万t</text>
							</view>
							<view class="flex s-center">
								<view class="fw" style="color: #555d6f">完成率</view>
								<u-count-to bold fontSize="13" decimals="2" color="#0052D9" class="m-l-4" :endVal="boliObj.caiMeiYearCompleteRate" />
								<text class="unit">%</text>
							</view>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item name="7">
					<template #title>
						<view class="content-item-title"><text class="title-txt">采场采剥量</text></view>
					</template>
					<my-grid :list="list1" :col="3" :decimals="2"></my-grid>
				</u-collapse-item>
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日车辆出动情况</text></view>
					</template>
					<my-scroll style="max-height: 360rpx">
						<my-table :columns="columns" :data="tableList"></my-table>
					</my-scroll>
				</u-collapse-item>
				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日设备出动情况</text></view>
					</template>
					<up-subsection class="m-b-10" :list="['挖掘机', '辅助设备']" mode="subsection" :current="current" @change="handleChange"></up-subsection>
					<my-scroll style="max-height: 360rpx">
						<my-table :columns="columns1" :data="tableList1"></my-table>
					</my-scroll>
				</u-collapse-item>
				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日车辆运输趟次情况</text></view>
					</template>
					<!-- 					<my-scroll style="max-height: 360rpx;">
						<my-table :columns="columns2" :data="tableList2"></my-table>
					</my-scroll> -->
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
import { ArrayToObj } from '../../../../utils/autoImport';
/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************页面数据逻辑*************************************************/
import { getXminerData, getApiFabric } from '@/api/customApi';

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7]),
	current = ref(0);

const tableList = ref([]),
	columns = [
		{
			label: '设备类型',
			prop: '设备类型',
			width: '80'
		},
		{
			label: '总数',
			prop: '总数',
			width: '45'
		},
		{
			label: '使用台数',
			prop: '使用台数',
			width: '75'
		},
		{
			label: '待机台数',
			prop: '待机台数',
			width: '75'
		},
		{
			label: '出动率',
			prop: '出动率',
			width: '70'
		}
	];

function getTable() {
	getApiFabric({
		apiCode: '07a8e96a-5471-415d-9d3b-d1d34da8748f',
		propertyMapping: {
			设备类型: 'type',
			总数: 'total',
			使用台数: 'use',
			待机台数: 'noUse',
			出动率: 'useRate'
		}
	}).then((res) => {
		tableList.value = res.data || [];
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const tableList1 = ref([]),
	columns1 = [
		{
			label: '设备类型',
			prop: '设备类型',
			width: '80'
		},
		{
			label: '总数',
			prop: '总数',
			width: '45'
		},
		{
			label: '使用台数',
			prop: '使用台数',
			width: '75'
		},
		{
			label: '待机台数',
			prop: '待机台数',
			width: '75'
		},
		{
			label: '出动率',
			prop: '出动率',
			width: '70'
		}
	];

function handleChange(inx) {
	current.value = inx;
	getTable1();
}

function getTable1() {
	getApiFabric({
		apiCode: current.value == 0 ? 'd1096504-1526-435d-8166-2dd314d6d9d3' : '66c8235e-f95a-4d1f-8e0b-a07daa4748fb',
		propertyMapping: {
			设备类型: current.value == 0 ? 'wjNm' : 'deviceNm',
			总数: current.value == 0 ? 'wjTotal' : 'deviceTotal',
			使用台数: current.value == 0 ? 'wjUse' : 'deviceUse',
			待机台数: current.value == 0 ? 'wjNoUse' : 'deviceNoUse',
			出动率: current.value == 0 ? 'wjUseRate' : 'deviceUseRate'
		}
	}).then((res) => {
		tableList1.value = res.data || [];
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const chartData = ref({}),
	opts = ref({
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4'],
		padding: [0, 0, 0, 0],
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 0,
			fontSize: 10,
			itemGap: 0
		},
		title: {
			name: '',
			fontSize: 30,
			color: '#000'
		},
		subtitle: {
			name: ''
		},
		extra: {
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: -90,
				labelWidth: 20,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	});

function getTable2() {
	getXminerData({
		apiCode: 'nDriveNumOfTrips'
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.type;
			item.value = item.nums * 1;
			total = total + item.value;
			delete item.type;
			delete item.nums;
		});
		opts.value.title.name = total;
		chartData.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const boliObj = reactive({});
const apiArr = ['blMonthPlanNew', 'monthCoal', 'blYearPlan', 'yCoalandBl', 'coalMonthPlanNew', 'coalYearPlan'];

function getBoLi() {
	let promiseArr = [];
	for (let i = 0; i < apiArr.length; i++) {
		promiseArr.push(
			getXminerData({
				apiCode: apiArr[i]
			})
		);
	}

	Promise.all(promiseArr).then((res) => {
		boliObj.blmplan = res[0].data[0].blmplan || 0; //剥离月计划
		boliObj.blyplan = res[2].data[0].blyplan || 0; //剥离年计划

		boliObj.mblcount = res[1].data[0].mblcount || 0; //剥离月已完成
		boliObj.mcoalcount = res[1].data[0].mcoalcount || 0; //采煤月已完成

		boliObj.yblcount = res[3].data[0].yblcount || 0; //剥离年已完成
		boliObj.ycoalcount = res[3].data[0].ycoalcount || 0; //采煤年已完成

		boliObj.coalmplan = res[4].data[0].coalmplan || 0; //采煤月计划
		boliObj.coalyplan = res[5].data[0].coalyplan || 0; //采煤年计划
	});
}

const apiArr1 = ['cb8ad12d-eb6b-4013-9de9-067a22828102', 'e84a686c-924b-47b6-b62f-c10b13a69e5b', '85bd8139-8957-491f-9606-a85fec09d1b6', 'd5a02aef-c8e9-4236-aa34-2a8fd2d70d9d'];

function boliAndCaiMeiProgress() {
	let promiseArr = [];
	for (let i = 0; i < apiArr1.length; i++) {
		promiseArr.push(
			getApiFabric({
				apiCode: apiArr1[i],
				propertyMapping: {
					percentage: 'completeRate'
				},
				params: []
			})
		);
	}

	Promise.all(promiseArr).then((res) => {
		boliObj.boliMonthPros = res[0].data[0].percentage || 0; //剥离月进度条
		boliObj.boliYearPros = res[1].data[0].percentage || 0; //剥离年进度条
		boliObj.caiMeiMonthPros = res[2].data[0].percentage || 0; //采煤月进度条
		boliObj.caiMeiYearPros = res[3].data[0].percentage || 0; //采煤年进度条
	});
}

const apiArr2 = ['cb8ad12d-eb6b-4013-9de9-067a22828102', 'e84a686c-924b-47b6-b62f-c10b13a69e5b', '85bd8139-8957-491f-9606-a85fec09d1b6', 'd5a02aef-c8e9-4236-aa34-2a8fd2d70d9d'];

function boliYesInfo() {
	let promiseArr = [];
	for (let i = 0; i < apiArr2.length; i++) {
		promiseArr.push(
			getApiFabric({
				params: [],
				apiCode: apiArr2[i],
				propertyMapping: {
					completeRate: 'completeRate',
					incomplete: 'incomplete'
				}
			})
		);
	}

	Promise.all(promiseArr).then((res) => {
		boliObj.boliMonthIncomplete = res[0].data[0].incomplete || 0; //剥离月待完成
		boliObj.boliMonthCompleteRate = res[0].data[0].completeRate || 0; //剥离月完成率

		boliObj.boliYearIncomplete = res[1].data[0].incomplete || 0; //剥离年待完成
		boliObj.boliYearCompleteRate = res[1].data[0].completeRate || 0; //剥离年完成率

		boliObj.caiMeiMonthIncomplete = res[2].data[0].incomplete || 0; //采煤月待完成
		boliObj.caiMeiMonthCompleteRate = res[2].data[0].completeRate || 0; //采煤月完成率

		boliObj.caiMeiYearIncomplete = res[3].data[0].incomplete || 0; //采煤年待完成
		boliObj.caiMeiYearCompleteRate = res[3].data[0].completeRate || 0; //采煤年完成率
	});
}

const list = ref([
	{
		img: 'work/jdgy/che.png',
		key: '6',
		title: '车辆异常',
		value: '0',
		unit: '条'
	},
	{
		img: 'work/jdgy/ren.png',
		key: '10',
		title: '驾驶员异常',
		value: '0',
		unit: '条'
	}
]);

function getList() {
	getXminerData({
		apiCode: 'driveWarnInfo'
	}).then((res) => {
		if (res.data) {
			const data = ArrayToObj(res.data, {
				key: 'ALERT_TYPE',
				val: 'NUM'
			});
			list.value.forEach((item, i) => {
				item.value = data[item.key] || 0;
			});
		}
	});
}

function detailFn(data) {
	if (data.title === '车辆异常') {
		uni.navigateTo({
			url: '/pages/application/ksgc/vehicle/carDetail'
		});
	} else {
		uni.navigateTo({
			url: '/pages/application/ksgc/vehicle/peopleDetail'
		});
	}
}

const list1 = ref([
	{
		title: '日采煤量',
		value: '0',
		unit: '万吨'
	},
	{
		title: '月采煤量',
		value: '0',
		unit: '万吨'
	},
	{
		title: '年采煤量',
		value: '0',
		unit: '万吨'
	},
	{
		title: '日剥离量',
		value: '0',
		unit: '万吨'
	},
	{
		title: '月剥离量',
		value: '0',
		unit: '万吨'
	},
	{
		title: '年剥离量',
		value: '0',
		unit: '万吨'
	}
]);

function getList1() {
	getXminerData({
		apiCode: 'caichangcaiboliang'
	}).then((res) => {
		list1.value.forEach((item, i) => {
			item.value = res.data[i]?.y;
		});
	});
}

function getServerData(refresh) {
	Promise.all([getTable(), getTable1(), getTable2(), getList1(), getList(), getBoLi(), boliAndCaiMeiProgress(), boliYesInfo()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss">
.unit {
	color: #8993a8;
	font-size: 20rpx;
}

:deep() {
	.uni-table-th {
		padding: 12px 5px;
	}
}
</style>
